<template>
	<div class="banner">
		<div class="top">
			<div class="header-left iconfont" @click='goback'>&#xe623;</div>
			<div class="header-center">{{ info.ln }}</div>
		</div>
		<div class="banner-main">
			<div class="left">
				<img :src='getImgUrl(info.hig)' :onerror='noImg'>
				<p>{{info.hz?info.hz:'--'}}</p>
			</div>
			<div class="con">
				<template v-if='info.sts == "notstarted"'>
					<h3>{{ info.sd.substring(0,9) }}</h3>
					<p>{{ info.sd.substring(11,16) }}</p>
				</template>
				<template v-else-if='info.sts == "inprogress"'>
					<h3>{{ info.hm_hs | textNull }}：{{  info.aw_hs | textNull}}</h3>
					<p>({{ info.hm_rs | textNull }}:{{ info.aw_rs | textNull }})</p>
					<span>正在进行中</span>
				</template>
				<template v-else-if='info.sts == "finished"'>
					<p>{{ info.sd.substring(0,16) }}</p>
					<p>({{  info.hm_fs+':'+ info.aw_fs }})</p>
					<span>已结束</span>
				</template>
				<template v-else>
					<h3>vs</h3>
				</template>
			</div>
			<div class="rigth">
				<img :src='getImgUrl(deatil.aig)' :onerror='noImg'>
				<p>{{ deatil.az?deatil.az:'--' }}</p>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'deatilBanner',
	props:{
      deatil:Object,
    },
	data: function(){
		return {
			noImg:'this.src="/static/img/soccerbig.png"',
			info:{},
		}
	},
	methods:{
		goback(){
			this.$router.back();
		},
		/*接口图片请求报403，是接口限制了图片的加载
		只要在请求到的图片链接前面加上‘https://images.weserv.nl/?url=’即可（注：这是一个专门缓存图片的网址），会有点慢。
		*/
		getImgUrl:function(_url) {
	  		return _url;
       	}
	},
	//props会触这个钩子，下面三个钩子函数不会触发
	updated(){
		this.info = this.deatil
	},
	created(){
	},
	mounted () {
	},
	activated () {
	}

};
</script>

<style lang="less" scoped>
	.banner{
	    position: fixed;
	    z-index: 100;
	    width: 100%;
	    left: 0;
	    top: 0;
	    height: 4.8rem;
	    background:url(/static/img/deatilBg.png) center no-repeat;
	    background-size:100% 100%;
	}
	.top{
		height: 1rem;
		color: #fff;
		.header-left{
			position: absolute;
	    	left: 0;
	    	top: 0;
		    width: 1rem;
		    height: 1rem;
		    text-align: center;
		    font-size: .5rem;
		    line-height:1rem;
		    color: #fff;
		}
		.header-center{
		    font-size: .36rem;
		    line-height: 1rem;
		    text-align: center;
		}
	}
	.banner-main{
		margin-top: .3rem;
		display: flex;
		justify-content: space-around;
		align-items:center;
		.left,.rigth{
			img{
				width: 1.94rem;
				height: 1.94rem;
				border-radius: 50%;
				background-color: #fff;
				overflow: hidden;
			}
			p{
				font-size: .3rem;
				color:#fff;
				text-align: center;
				line-height: 2;
			}
		}
		.con{
			color: #fff;
			text-align: center;
			h3{
				font-size: .6rem;
				line-height: 2;
			}
			p,span{
				font-size: .3rem;
				line-height: 2;
			}
		}
	}
</style>